<!-- DEFAULT -->
<div class="color" layout="row" layout-wrap layout-align="center center">
    <div class="md-background-bg" flex="100" layout="row" layout-padding>
        <div flex>Default</div>
        <div flex>{{vm.themes.active.theme.background.color}}</div>
        <div flex>.md-background-bg</div>
    </div>

    <div class="md-background-bg" flex="100" layout="row" layout-padding>
        <div flex>Primary Text</div>
        <div flex>{{vm.themes.active.theme.background.contrast1}}</div>
        <div flex>.md-background-bg</div>
    </div>

    <div class="md-background-bg" flex="100" class="secondary-text" layout="row" layout-padding>
        <div class="secondary-text" flex>Secondary Text / Icon</div>
        <div class="secondary-text" flex>{{vm.themes.active.theme.background.contrast2}}</div>
        <div class="secondary-text" flex>.md-background-bg .secondary-text</div>
    </div>

    <div class="md-background-bg" flex="100" class="hint-text" layout="row" layout-padding>
        <div class="hint-text" flex>Hint Text / Disabled Text</div>
        <div class="hint-text" flex>{{vm.themes.active.theme.background.contrast3}}</div>
        <div class="hint-text" flex>.md-background-bg .hint-text</div>
    </div>

    <div class="md-background-bg" flex="100" class="divider" layout="row" layout-padding>
        <div class="fade-text" flex>Fade Text / Divider</div>
        <div class="fade-text" flex>{{vm.themes.active.theme.background.contrast4}}</div>
        <div class="fade-text" flex>.md-background-bg .divider</div>
    </div>

    <div flex="100" class="md-primary-bg md-background-fg" layout="row" layout-padding>
        <div flex>As foreground color</div>
        <div flex>{{vm.themes.active.theme.background.color}}</div>
        <div flex>.md-background-fg</div>
    </div>
</div>
<!-- / DEFAULT -->

<!-- HUE-1 -->
<div class="color" layout="row" layout-wrap layout-align="center center">
    <div class="md-background-bg md-hue-1" flex="100" layout="row" layout-padding>
        <div flex>Hue 1</div>
        <div flex>{{vm.themes.active.theme.background.hue1.color}}</div>
        <div flex>.md-background-bg .md-hue-1</div>
    </div>

    <div class="md-background-bg md-hue-1" flex="100" layout="row" layout-padding>
        <div flex>Primary Text</div>
        <div flex>{{vm.themes.active.theme.background.hue1.contrast1}}</div>
        <div flex>.md-background-bg</div>
    </div>

    <div class="md-background-bg md-hue-1" flex="100" class="secondary-text" layout="row" layout-padding>
        <div class="secondary-text" flex>Secondary Text / Icon</div>
        <div class="secondary-text" flex>{{vm.themes.active.theme.background.hue1.contrast2}}</div>
        <div class="secondary-text" flex>.md-background-bg .md-hue-1 .secondary-text</div>
    </div>

    <div class="md-background-bg md-hue-1" flex="100" class="hint-text" layout="row" layout-padding>
        <div class="hint-text" flex>Hint Text / Disabled Text</div>
        <div class="hint-text" flex>{{vm.themes.active.theme.background.hue1.contrast3}}</div>
        <div class="hint-text" flex>.md-background-bg .md-hue-1 .hint-text</div>
    </div>

    <div class="md-background-bg md-hue-1" flex="100" class="divider" layout="row" layout-padding>
        <div class="fade-text" flex>Fade Text / Divider</div>
        <div class="fade-text" flex>{{vm.themes.active.theme.background.hue1.contrast4}}</div>
        <div class="fade-text" flex>.md-background-bg .md-hue-1 .divider</div>
    </div>

    <div flex="100" class="md-primary-bg" layout="row" layout-padding>
        <div flex class="md-background-fg md-hue-1">As foreground color</div>
        <div flex class="md-background-fg md-hue-1">{{vm.themes.active.theme.background.hue1.color}}</div>
        <div flex class="md-background-fg md-hue-1">.md-background-fg</div>
    </div>
</div>
<!-- / HUE-1 -->

<!-- HUE-2 -->
<div class="color" layout="row" layout-wrap layout-align="center center">
    <div class="md-background-bg md-hue-2" flex="100" layout="row" layout-padding>
        <div flex>Hue 2</div>
        <div flex>{{vm.themes.active.theme.background.hue2.color}}</div>
        <div flex>.md-background-bg .md-hue-2</div>
    </div>

    <div class="md-background-bg md-hue-2" flex="100" layout="row" layout-padding>
        <div flex>Primary Text</div>
        <div flex>{{vm.themes.active.theme.background.hue2.contrast1}}</div>
        <div flex>.md-background-bg</div>
    </div>

    <div class="md-background-bg md-hue-2" flex="100" class="secondary-text" layout="row" layout-padding>
        <div class="secondary-text" flex>Secondary Text / Icon</div>
        <div class="secondary-text" flex>{{vm.themes.active.theme.background.hue2.contrast2}}</div>
        <div class="secondary-text" flex>.md-background-bg .md-hue-2 .secondary-text</div>
    </div>

    <div class="md-background-bg md-hue-2" flex="100" class="hint-text" layout="row" layout-padding>
        <div class="hint-text" flex>Hint Text / Disabled Text</div>
        <div class="hint-text" flex>{{vm.themes.active.theme.background.hue2.contrast3}}</div>
        <div class="hint-text" flex>.md-background-bg .md-hue-2 .hint-text</div>
    </div>

    <div class="md-background-bg md-hue-2" flex="100" class="divider" layout="row" layout-padding>
        <div class="fade-text" flex>Fade Text / Divider</div>
        <div class="fade-text" flex>{{vm.themes.active.theme.background.hue2.contrast4}}</div>
        <div class="fade-text" flex>.md-background-bg .md-hue-2 .divider</div>
    </div>

    <div flex="100" class="md-primary-bg" layout="row" layout-padding>
        <div flex class="md-background-fg md-hue-2">As foreground color</div>
        <div flex class="md-background-fg md-hue-2">{{vm.themes.active.theme.background.hue2.color}}</div>
        <div flex class="md-background-fg md-hue-2">.md-background-fg</div>
    </div>
</div>
<!-- / HUE-2 -->

<!-- HUE-3 -->
<div class="color" layout="row" layout-wrap layout-align="center center">
    <div class="md-background-bg md-hue-3" flex="100" layout="row" layout-padding>
        <div flex>Hue 3</div>
        <div flex>{{vm.themes.active.theme.background.hue3.color}}</div>
        <div flex>.md-background-bg .md-hue-3</div>
    </div>

    <div class="md-background-bg md-hue-3" flex="100" layout="row" layout-padding>
        <div flex>Primary Text</div>
        <div flex>{{vm.themes.active.theme.background.hue3.contrast1}}</div>
        <div flex>.md-background-bg</div>
    </div>

    <div class="md-background-bg md-hue-3" flex="100" class="secondary-text" layout="row" layout-padding>
        <div class="secondary-text" flex>Secondary Text / Icon</div>
        <div class="secondary-text" flex>{{vm.themes.active.theme.background.hue3.contrast2}}</div>
        <div class="secondary-text" flex>.md-background-bg .md-hue-3 .secondary-text</div>
    </div>

    <div class="md-background-bg md-hue-3" flex="100" class="hint-text" layout="row" layout-padding>
        <div class="hint-text" flex>Hint Text / Disabled Text</div>
        <div class="hint-text" flex>{{vm.themes.active.theme.background.hue3.contrast3}}</div>
        <div class="hint-text" flex>.md-background-bg .md-hue-3 .hint-text</div>
    </div>

    <div class="md-background-bg md-hue-3" flex="100" class="divider" layout="row" layout-padding>
        <div class="fade-text" flex>Fade Text / Divider</div>
        <div class="fade-text" flex>{{vm.themes.active.theme.background.hue3.contrast4}}</div>
        <div class="fade-text" flex>.md-background-bg .md-hue-3 .divider</div>
    </div>

    <div flex="100" class="md-primary-bg" layout="row" layout-padding>
        <div flex class="md-background-fg md-hue-3">As foreground color</div>
        <div flex class="md-background-fg md-hue-3">{{vm.themes.active.theme.background.hue3.color}}</div>
        <div flex class="md-background-fg md-hue-3">.md-background-fg</div>
    </div>
</div>
<!-- / HUE-3 -->